<template>
  <view class="container">
    <my-header></my-header>
    <view class="bg-color1 home-box" :style="{minHeight:_100vh-getStatusBarHeight()-17+'px'}">
      <!-- 轮播图 -->
      <swiper class="swiper-box" circular autoplay :interval="3000" :duration="300" indicator-dots
        indicator-active-color="#ff557f">
        <swiper-item v-for="(item, index) of 3" :key="index">
          <navigator class="banner-item">
            <image src="../../static/shop1.jpg"></image>
          </navigator>
        </swiper-item>
      </swiper>
      <!-- 标签区 -->
      <view class="tags-box flex-row-between-center">
        <template v-for="item of tags" :key="item">
          <view class="col flex-row-align-center">
            <!-- icon+文字 -->
            <uni-icons type="checkbox"></uni-icons>
            <view class="feature">{{ item }}</view>
          </view>
        </template>
      </view>
      <!-- 陪打时长种类 -->
      <view class="cate-hour-list">
        <template v-for="item of typeArr" :key="item.name">
          <view class="cate-hour-list-item flex">
            <image src="../../static/service.jpeg" mode=""></image>
            <view class="intro-box flex-col-between">
              <view class="row1 flex-between">
                <view class="cate-name">{{ item.name }}</view>
                <view class="choice-count">超2000人选择</view>
              </view>
              <view class="row2 flex-between">
                <view class="flex-row-align-center">
                  <view class="yuan">￥</view>
                  <view class="price">{{ item.price }}</view>
                </view>

                <button class="btn" size="mini" type="primary" @click="chooseAssitantHandler(item)">选择助教</button>
              </view>
            </view>
          </view>
        </template>
      </view>
    </view>
  </view>

</template>

<script setup>
  import {getStatusBarHeight} from '../../utils/system_info/index.js'
  
  const _100vh=uni.getSystemInfoSync().windowHeight;
  const tags = ['随叫随到', '实名认证', '平台保障'];
  const typeArr = [{
      name: '1小时',
      price: 10,
      isRecommand: false,
      value: 1
    },
    {
      name: '2小时',
      price: 20,
      isRecommand: true,
      value: 2
    },
    {
      name: '3小时',
      price: 30,
      isRecommand: false,
      value: 3
    }
  ];
  // 点击选择助教
  function chooseAssitantHandler(cate) {
    // 携带所选择的陪打时长
    uni.navigateTo({
      url: `/subpkg/assistant-list/assistant-list?cate=${cate}`
    });
  }
  
</script>

<style lang="scss" scoped>
  // 100vh=uni.getSystemInfoSync().windowHeight(不包括tabbar的高度)
  .container {
    .home-box {
      padding: 0 30rpx;

      // 轮播图区
      .swiper-box {
        height: 346rpx;

        .banner-item {
          width: 100%;
          height: 100%;
          box-sizing: border-box;

          image {
            width: 100%;
            height: 100%;
            border-radius: 30rpx;
          }
        }
      }

      // 标签区
      .tags-box {
        background: #fff;
        margin: 25rpx 0;
        padding: 14rpx;
        border-radius: $uni-border-radius-base;

        .col {
          .feature {
            font-size: $uni-font-size-sm;
            color: $uni-text-color-grey;
            margin-left: 2px;
          }
        }
      }

      // 陪打时长种类列表区
      .cate-hour-list {
        &-item {
          background: #fff;
          border-radius: $uni-border-radius-lg;
          padding: 10px;
          margin-top: 14px;

          image {
            width: 140rpx;
            height: 140rpx;
            border-radius: $uni-border-radius-base;
          }

          .intro-box {
            flex-grow: 1;
            margin-left: 20rpx;
            font-size: 27rpx;

            .row1 {
              .choice-count {
                color: $uni-text-color-grey;
                font-size: $uni-font-size-sm;
              }
            }

            .row2 {
              .btn {
                margin-right: 0;
              }

              .yuan {
                font-size: $uni-font-size-sm;
              }

              .price {
                color: red;
              }
            }
          }
        }
      }
    }
  }
</style>